import {Component, ComponentProps, VueComponent, Mut, Computed} from "vue3-oop";
import {NForm, NFormItemGi, NGrid, NInputGroup,NInputGroupLabel,NInput,NButton, NSelect, NCheckbox} from "naive-ui";
import BpmnModeler from '../../../BpmnModeler';
import styles from './index.module.scss';

interface IProps {
  bpmnModeler: BpmnModeler,
}
@Component()
export default class ServiceTaskPanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    bpmnModeler: {},
  }

  public static tabKey = "ServiceTaskPanel"
  public static tabName = "服务配置"

  @Mut() private state = {
    // 是否异步
    async: 'false',
    // 是否独占
    exclusive: 'false',
    // 是否补偿
    isForCompensation: 'false',
    // 跳过表达式
    skipExpression: '',
    // Java类全名
    class: '',
    // 结果变量
    resultVariableName: '',
    // 可触发的
    triggerable: 'false',
    // 结果变量局部有效
    useLocalScopeForResultVariable: 'false',
    // 结果变量瞬态存储
    storeResultVariableAsTransient: 'false',
    // 默认流转
    default: '',
  }

  private setConfigValues = (config:any)=>{
    this.props.bpmnModeler.selectedCell.updateData(config);
  }

  private getConfigValues = ()=>{
    const { selectedCell } = this.props.bpmnModeler;
    this.state.async = selectedCell.data?.async || 'false';
    this.state.exclusive = selectedCell.data?.exclusive || 'false';
    this.state.isForCompensation = selectedCell.data?.isForCompensation || 'false';
    this.state.class = selectedCell.data?.class || '';
    this.state.resultVariableName = selectedCell.data?.resultVariableName || '';
    this.state.triggerable = selectedCell.data?.triggerable || 'false';
    this.state.skipExpression = selectedCell.data?.skipExpression || '';
    this.state.useLocalScopeForResultVariable = selectedCell.data?.useLocalScopeForResultVariable || 'false';
    this.state.storeResultVariableAsTransient = selectedCell.data?.storeResultVariableAsTransient || 'false';
    this.state.default = selectedCell.data?.default || '';
  }

  private updateAsync=(value:string)=>{
    this.state.async = value;
    this.setConfigValues({ async: this.state.async });
  }

  private updateExclusive=(value:string)=>{
    this.state.exclusive = value;
    this.setConfigValues({ exclusive: this.state.exclusive });
  }

  private updateIsForCompensation=(value:string)=>{
    this.state.isForCompensation = value;
    this.setConfigValues({ isForCompensation: this.state.isForCompensation });
  }

  private updateClass = (value:string)=>{
    this.state.class = value;
    this.setConfigValues({ class: this.state.class });
  }

  private updateResultVariableName=(value:string)=>{
    this.state.resultVariableName = value;
    this.setConfigValues({ resultVariableName: this.state.resultVariableName });
  }

  private updateTriggerable=(value:string)=>{
    this.state.triggerable = value;
    this.setConfigValues({ triggerable: this.state.triggerable });
  }

  private updateSkipExpression=(value:string)=>{
    this.state.skipExpression = value;
    this.setConfigValues({ skipExpression: this.state.skipExpression });
  }

  private updateUseLocalScopeForResultVariable=(value:string)=>{
    this.state.useLocalScopeForResultVariable = value;
    this.setConfigValues({ useLocalScopeForResultVariable: this.state.useLocalScopeForResultVariable });
  }

  private updateStoreResultVariableAsTransient=(value:string)=>{
    this.state.storeResultVariableAsTransient = value;
    this.setConfigValues({ storeResultVariableAsTransient: this.state.storeResultVariableAsTransient });
  }

  private updateDefault=(value:string)=>{
    this.state.default = value;
    this.setConfigValues({ default: this.state.default });
  }

  private getFlowOptions=()=>{
    const { bpmnModeler } = this.props;
    const options = [] as any[];
    bpmnModeler.getGraph().getOutgoingEdges(bpmnModeler.selectedId)?.forEach((edge)=>{
      const label = (edge as any).label as string || edge.id;
      options.push({value:edge.id,label:label});
    })
    return options;
  }

  render(){
    this.getConfigValues();
    return(
      <NForm labelPlacement="left" labelWidth={100}>
        <NGrid cols={2} xGap={20}>
          <NFormItemGi label="是否异步"><NSelect options={[{value:'true',label:'是'},{value:'false',label:'否'}]} value={this.state.async} onUpdateValue={this.updateAsync} /></NFormItemGi>
          <NFormItemGi label="是否独占"><NSelect options={[{value:'true',label:'是'},{value:'false',label:'否'}]} value={this.state.exclusive} onUpdateValue={this.updateExclusive} /></NFormItemGi>
          <NFormItemGi label="是否补偿"><NSelect options={[{value:'true',label:'是'},{value:'false',label:'否'}]} value={this.state.isForCompensation} onUpdateValue={this.updateIsForCompensation} /></NFormItemGi>
          <NFormItemGi label="可触发的"><NSelect options={[{value:'true',label:'是'},{value:'false',label:'否'}]} value={this.state.triggerable} onUpdateValue={this.updateTriggerable} /></NFormItemGi>
          <NFormItemGi label="结果变量局部有效"><NSelect options={[{value:'true',label:'是'},{value:'false',label:'否'}]} value={this.state.useLocalScopeForResultVariable} onUpdateValue={this.updateUseLocalScopeForResultVariable} /></NFormItemGi>
          <NFormItemGi label="结果变量瞬态存储"><NSelect options={[{value:'true',label:'是'},{value:'false',label:'否'}]} value={this.state.storeResultVariableAsTransient} onUpdateValue={this.updateStoreResultVariableAsTransient} /></NFormItemGi>
          <NFormItemGi label="Java类全名"><NInput value={this.state.class} onUpdateValue={this.updateClass}/></NFormItemGi>
          <NFormItemGi label="结果变量"><NInput value={this.state.resultVariableName} onUpdateValue={this.updateResultVariableName}/></NFormItemGi>
          <NFormItemGi label="跳过表达式"><NInput value={this.state.skipExpression} onUpdateValue={this.updateSkipExpression}/></NFormItemGi>
          <NFormItemGi label="默认流转"><NSelect options={this.getFlowOptions()} value={this.state.default} onUpdateValue={this.updateDefault} /></NFormItemGi>
        </NGrid>
      </NForm>
    )
  }
}